<!--
*@Author: QWP
*@Description: 回司详情信息
*@Date: 2024-10-10 10:37:02
-->
<template>
  <u-dialog
    title="外派备案信息"
    :hideBtns="['submit']"
    placement="right"
    v-bind="$attrs">
    <a-layout class="f-h-100 u-in-info-table">
      <caption class="f-font-center f-font-size24">公司外派人员回司备案表</caption>
      <table cellpadding="100" border="1"
        class="u-in-info-table">
        <tbody>
          <tr v-for="row in userInfo">
            <td v-for="col in row" v-bind="col">
              <template v-if="col['elType'] == 'checkBox'">
                <a-checkbox-group v-model:value="col['label']" style="width: 100%" disabled>
                  <a-row>
                    <a-col :span="12">
                      <a-checkbox value="购买服务">购买服务</a-checkbox>
                    </a-col>
                    <a-col :span="12">
                      <a-checkbox value="非购买服务">非购买服务</a-checkbox>
                    </a-col>
                    <a-col :span="24">
                      <a-checkbox value="other">其他(注: )</a-checkbox>
                    </a-col>
                  </a-row>
                </a-checkbox-group>
              </template>
              <template v-else>
                <span v-bind="col['spanProps'] || {}">{{ col.label || '' }}</span>
              </template>
            </td>
          </tr>
        </tbody>
      </table>
    </a-layout>
  </u-dialog>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted } from 'vue' 
import { storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'vue-router'

const userInfo = [
  [
    {label: '派遣人员姓名', key: '', class: 'justified-text',  colspan: 1, rowspan: 1},
    {label: '', key: '', colspan: 1, rowspan: 1},
  ],
  [
    {label: '派遣事由', key: '', style: { width: '80px' }},
    {label: '', key: '',},
  ],
  [
    {label: '派遣期限', key: '', colspan: 1, rowspan: 1},
    {label: '自 2024 年 10 月 1 日起，到  2024  年 10 月 30 日止，共计  1  月  30  天。', key: '', colspan: 1, rowspan: 1},
  ],
  [
    {label: '派遣性质', key: '', colspan: 1, rowspan: 1},
    {label: '', key: '', colspan: 1, rowspan: 1, elType: 'checkBox'},
  ],
  [
    {label: '回司日期', key: '', class: 'justified-text', colspan: 1, rowspan: 1},
    {label: '', key: '', colspan: 1, rowspan: 1},
  ],
  
  [
    {label: '回司人员隶属部门意见', key: '', class: 'justified-text', colspan: 1, rowspan: 3},
    {label: '', key: '', colspan: 1, rowspan: 1, style: { height: '60px', 'border-bottom-color': 'transparent' }},
  ],
  [
    {label: '签字：', key: '', colspan: 1, rowspan: 1, class: 'f-font-right',
      style: { 'border-bottom-color': 'transparent' },
      spanProps: {
        style: {
          'display': 'inline-block', width: '200px', textAlign: 'left'
        }
      }
    },
  ],
  [
    {label: '年月日', key: '', colspan: 1, rowspan: 1, class: 'f-font-right',
      spanProps: {
        style: {
          'display': 'inline-block', width: '200px', textAlign: 'left', 'letter-spacing': '30px'
        }
      }
    },
  ],

  [
    {label: '回司人员隶属部门分管领导意见', key: '', class: 'justified-text', colspan: 1, rowspan: 3},
    {label: '', key: '', colspan: 1, rowspan: 1, style: { height: '60px', 'border-bottom-color': 'transparent' }},
  ],
  [
    {label: '签字：', key: '', colspan: 1, rowspan: 1, class: 'f-font-right',
      style: { 'border-bottom-color': 'transparent' },
      spanProps: {
        style: {
          'display': 'inline-block', width: '200px', textAlign: 'left'
        }
      }
    },
  ],
  [
    {label: '年月日', key: '', colspan: 1, rowspan: 1, class: 'f-font-right',
      spanProps: {
        style: {
          'display': 'inline-block', width: '200px', textAlign: 'left', 'letter-spacing': '30px'
        }
      }
    },
  ],

  [
    {label: '人力资源部意见', key: '', class: 'justified-text', colspan: 1, rowspan: 3},
    {label: '', key: '', colspan: 1, rowspan: 1, style: { height: '60px', 'border-bottom-color': 'transparent' }},
  ],
  [
    {label: '签字：', key: '', colspan: 1, rowspan: 1, class: 'f-font-right',
      style: { 'border-bottom-color': 'transparent' },
      spanProps: {
        style: {
          'display': 'inline-block', width: '200px', textAlign: 'left'
        }
      }
    },
  ],
  [
    {label: '年月日', key: '', colspan: 1, rowspan: 1, class: 'f-font-right',
      spanProps: {
        style: {
          'display': 'inline-block', width: '200px', textAlign: 'left', 'letter-spacing': '30px'
        }
      }
    },
  ],
]

</script>

<style lang='scss'>
.u-in-info-table {
  .f-font-center {
    text-align: center
  }
  .f-font-right {
    text-align: right
  }
  .justified-text {
    text-align-last: justify;
  }
  th, td {
    padding: 10px;
  }
  .ant-checkbox-wrapper-disabled {
    span{
      color: rgba(0, 0, 0, 0.88) !important;
    }
    .ant-checkbox-inner {
      background-color: #ffffff !important;
      border: 1px solid #d9d9d9 !important;
      &::after {
        border: 2px solid #fff !important;
      }
    }
  }
}
</style>